<template>
	<view class="login-container">
		<view class="login-top">
			<image src="/static/logo.png"></image>
			<view>高合珈云系统登录</view>
		</view>
		<view>
			
			<view class="login-form">
				<view class="login-form-username">
					<image src="/static/img/login.png"></image>
					<input type="nickname" v-model="loginForm.phone" class="input" />
				</view>
				<view class="login-form-code">
					<view class="login-form-code-left">
						<image src="/static/img/code1.png"></image>
						<input placeholder="请输入验证码" type="text" v-model="loginForm.code" class="input" style="margin-left: 2vh;" />
					</view>
			
					<view class="login-code" v-if="sendMsg=='获取验证码'">
						<button @click="getCode()">{{sendMsg}}</button>
					</view>
					<view class="login-code" v-else>
						<button >{{sendMsg}}</button>
					</view>
				</view>
				<view class="user-type">
					类型:
					<view class="type">
						<uni-data-checkbox  v-model="type" :localdata="types" />
					</view>
				</view>
			</view>
			<view class="login-button">
				<button @click="login()">登录</button>
			</view>
		</view>
		
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
		
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/config.js'
import { login } from '../../api/login'
import { getCode } from '../../api/user'
	export default {
		data() {
			return {
				loginForm: {
					phone: "15588879699",
					code: ""
				},
				messageText:"",
				msgType:"",
				sendMsg:"获取验证码",
				types:[{
					text:"会员",
					value:"会员"
				},{
					text:"老师",
					value:"老师"
				}],
				type:""
			}
		},

		methods: {
			login() {
				var _this = this
				login(this.loginForm.phone,this.loginForm.code,this.type).then(res=>{
					console.log(res);
					if(res.data.code==0){
						this.msgType="error"
						this.messageText = res.data.msg
						this.$refs.message.open()
					}else{
						this.msgType="success"
						this.messageText = "登陆成功"
						this.$refs.message.open()
						setTimeout(function aa(){
							uni.setStorageSync("auth",res.data.data.id)
							uni.switchTab({
								url:'/pages/index/index'
							})
						},2000)
						
					}
					
				})
			},
			toRegister() {
				uni.navigateTo({
					url: "/pages/register/register"
				})
			},
			getCode() {
				var param={
					...this.loginForm
				}
				getCode(param).then(res=>{
					console.log(res);
					if(res.data.code==1){
						uni.showToast({
							title:"验证码发送成功，有效时长60秒",
							icon:'success',
						}).then(res=>{
							var seconds=60	
							var timer = setInterval(() => {
								seconds--
								this.sendMsg=seconds+"s"
								if(seconds==0){
									clearInterval(timer)
									timer=null
									this.sendMsg="获取验证码"
								}
							}, 1000);
							
						})
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:"error"
						})
					}
				})
			}
		},
		onLoad() {

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.login-top {
		width: 50%;
		margin: 8vh auto;
		display: flex;
	}

	.login-top image {
		width: 7vh;
		height: 8vh;
		border-radius: 0.6vh;
	}

	.login-top view {
		font-family: "微软雅黑";
		margin-left: 2vh;
		font-weight: 650;
		line-height: 8vh;
	}

	.login-form-username {
		display: flex;
		width: 85%;
		background-color: #F5F6F7;
		margin: 0vh auto;
		height: 5vh;
		border-radius: 5vh;
		justify-content: center;

	}

	.login-form-username image {
		width: 3vh;
		height: 3vh;
		position: relative;
		left: -1vh;
		top: 1vh;
	}

	.input {
		width: 80%;
		// margin-left: 2vh;
		position: relative;
		left: 0vh;
		top: 1vh;
		font-size: 2vh;
	}

	.login-form-password {
		display: flex;
		width: 85%;
		background-color: #F5F6F7;
		margin: 0 auto;
		height: 5vh;
		border-radius: 5vh;
		justify-content: center;

	}

	.login-form-password image {
		width: 3vh;
		height: 3vh;
		position: relative;
		left: -1vh;
		top: 1vh;
	}

	.login-form-code {
		display: flex;
		width: 85%;
		margin: 0 auto;

	}

	.login-code {
		// background-color: red;
		height: 4vh;
		flex: 1;
		line-height: 4vh;
		margin-top: 3vh;
	}

	.login-code button {
		font-size: 2vh;
	}

	.login-form-code-left {
		display: flex;
		width: 40%;
		flex: 2;
		background-color: #F5F6F7;
		margin: 3vh auto;
		height: 6vh;
		border-radius: 5vh;
		justify-content: center;
	}

	.login-form-code image {
		width: 3vh;
		height: 3vh;
		position: relative;
		left: 1vh;
		top: 1vh;
		margin-left: 1.5vh;
	}

	.login-code-img {
		height: 38px;
		position: absolute;
		margin-left: 10px;
		width: 200rpx;
	}

	.login-button button {
		width: 80%;
		margin: 0 auto;
		background-color: #0081FF;
		color: white;
		text-align: center;
		height: 6vh;
		border-radius: 4vh;
		line-height: 6vh;
	}

	.register-button button {
		width: 80%;
		margin: 2vh auto;
		background-color: seagreen;
		color: white;
		text-align: center;
		height: 6vh;
		border-radius: 4vh;
		line-height: 6vh;
	}
	.user-type{
		display: flex;
		margin:0 6vh 2vh 6vh;
	}
	.type{
		margin-left: 4vh;
	}
</style>